<template>
  <div id="microVideo-wrap">
    <FilterParam @e-courseList="refreshList" />
    <NewAndHot :totle="allTotle" @e-newAndHot="refreshListTwo" />
    <div id="microVideo-wrap">
      <div id="microVideo-list">
        <div class="list-wrap webheart">
          <div class="list-wrap-hed">
            <p class="fl">校本微视频</p>
            <!-- <p class="fr">查看更多 +</p> -->
          </div>
          <CourseList v-if="tableData.length" :tableData="tableData" />
          <Pagination
            v-show="parseInt(pageObj.count) > 0"
            :total="parseInt(pageObj.count)"
            @change="getList"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
          />
          <el-empty
            description="暂无数据"
            v-if="tableData.length == 0"
          ></el-empty>
        </div>
      </div>
      <div id="microVideo-Inside">
        <div class="list-wrap webheart">
          <div class="list-wrap-hed inside">
            <p class="fl">校外微视频</p>
            <!-- <p class="fr">查看更多 +</p> -->
          </div>
          <CourseList v-if="tableData2.length" :tableData="tableData2" />

          <Pagination
            v-show="parseInt(pageObj2.count) > 0"
            :total="parseInt(pageObj2.count)"
            @change="getList2"
            :page.sync="listQuery2.page"
            :limit.sync="listQuery2.limit"
          />
          <el-empty
            description="暂无数据"
            v-if="tableData2.length == 0"
          ></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FilterParam from '../../courseLibrary/courseList/FilterParam.vue'
import CourseList from '@/components/home/courseList.vue'
import { openApiSysCourseQuery } from '@/api/openApi'
import NewAndHot from '../../components/NewAndHot.vue'
export default {
  components: {
    NewAndHot,
    FilterParam,
    CourseList,
    OrnamentImg: () => import('../../components/OrnamentImg.vue'),
  },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 8,
        courseType: this.$route.meta.type,
        status: 1,
        auditStatus: 2,
      },
      listQuery2: {
        page: 1,
        limit: 8,
        courseType: this.$route.meta.type,
        status: 1,
        auditStatus: 2,
      },
      tableData: [],
      pageObj: {},
      tableData2: [],
      pageObj2: {},
      loading: false,
      allTotle: 0,
    }
  },
  mounted() {
    this.getList()
    this.getList2()
  },
  methods: {
    getList() {
      this.loading = true
      this.listQuery.sourceType = 1
      this.allTotle = 0
      openApiSysCourseQuery(this.listQuery).then((res) => {
        setTimeout(() => {
          this.tableData = res.data.data
          this.pageObj = res.data
          this.loading = false
          this.allTotle = Number(this.allTotle) + Number(this.pageObj.count)
        }, 200)
      })
    },
    getList2() {
      this.loading = true
      this.allTotle = 0
      this.listQuery2.sourceType = 2
      openApiSysCourseQuery(this.listQuery2).then((res) => {
        setTimeout(() => {
          this.tableData2 = res.data.data
          this.pageObj2 = res.data
          this.loading = false
          this.allTotle = Number(this.allTotle) + Number(this.pageObj2.count)
        }, 200)
      })
    },
    refreshList(v) {
      if (v) {
        Object.assign(this.listQuery, v)
        Object.assign(this.listQuery2, v)
      }
      this.getList()
      this.getList2()
    },
    refreshListTwo(v) {
      if (v == 1) {
        //最新
        Object.assign(this.listQuery, {
          sortOrder: '',
          recommended: '',
        })
        Object.assign(this.listQuery2, {
          sortOrder: '',
          recommended: '',
        })
      } else if (v == 2) {
        //最热
        Object.assign(this.listQuery, {
          sortOrder: 'clickNum',
          recommended: '',
        })
        Object.assign(this.listQuery2, {
          sortOrder: 'clickNum',
          recommended: '',
        })
      } else {
        //推荐
        Object.assign(this.listQuery, {
          recommended: '1',
          sortOrder: 'recommended',
        })
        Object.assign(this.listQuery2, {
          recommended: '1',
          sortOrder: 'recommended',
        })
      }
      this.getList()
      this.getList2()
    },
  },
}
</script>

<style  lang="scss" >
#microVideo-list,
#microVideo-Inside {
  background: #fff;
  width: 100%;
  .list-wrap {
    // width: 1400px;
    margin: 0 auto;
    padding-top: 30px;
    background: #fff;
    .list-wrap-hed {
      height: 50px;

      margin-bottom: 30px;
      background: url(../../../../assets/specialty/h1.png) no-repeat;
      background-color: #f7edef;
      p {
        line-height: 50px;
        padding: 0 20px;
      }
      .fl {
        font-size: 20px;
        font-weight: 900;
        color: #fff;
      }
      .fr {
        cursor: pointer;
      }
    }
    .list-wrap-hed.inside {
      background-color: #fff;
    }
    .list--wrap-item {
      height: 350px;
      cursor: pointer;
      .l-img {
        width: 100%;
        // height: 215px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          display: inherit;
        }
        .comment-num {
          position: absolute;
          right: 0;
          bottom: 0;
          padding: 10px 25px;
          background: #282b30;
          color: #fff;
          i {
            font-size: 16px;
            padding-right: 5px;
          }
        }
      }
      .r-txt {
        background: #fff;
        // width: 282px;
        // padding: 20px;
        .title {
          padding-bottom: 20px;

          font-size: 20px;
        }
        .col {
          color: #8c8c8c;
        }
        .txt-info {
          .txt-row {
            width: 100%;
            margin-bottom: 15px;
            .row-name {
            }
            .row-cont {
              width: 90%;
            }
            .four-ellipsis {
              height: 100px;
              line-height: 24px;
            }
          }
        }
        .txt-score {
          p {
            .start {
              margin: 0 20px;
            }
            .marksco {
              margin-left: 50px;
            }
          }
          .txt-ico {
            i {
              padding-right: 5px;
              font-weight: 900;
            }
            img {
              margin-right: 5px;
            }
            span {
              margin-right: 15px;
            }
            .i-size i {
              font-size: 16px;
            }
          }
          i.el-icon-date {
            font-weight: 900;
            margin-right: 5px;
          }
        }
      }
    }
  }
}
#microVideo-list .el-card__body,
#microVideo-Inside .el-card__body {
  // padding: 5px;
}
#microVideo-list .el-col.el-col-6,
#microVideo-Inside .el-col.el-col-6 {
  margin-bottom: 30px;
}
#microVideo-wrap {
  background: #ebe7e7;
  #microVideo-Inside {
    margin-top: 30px;
    background: #ebe7e7;
    padding-bottom: 30px;
    .list-wrap {
      padding-top: 0;
      margin-top: 30px;
      background: transparent;
    }
  }
}
</style>
